<template>
    <div>
        <!-- 顶部导航 -->
        <NavTopBar title="我的" />

        <van-skeleton title :avatar="true" :row="3" :loading="loading">
            <div class="user">
                <div class="user_info">
                    <img
                        class="user_info_img"
                        src="https://s.yezgea02.com/1604040746310/aaaddd.png"
                    />
                    <div class="user_info_desc">
                        <p>昵称：{{ user.nickName }}</p>
                        <p>登录名：{{ user.loginName }}</p>
                        <p class="name">个性签名：{{ user.introduceSign }}</p>
                    </div>
                </div>
            </div>
        </van-skeleton>

        <div>
            <van-cell title="我的订单" is-link to="/order" />
            <van-cell title="账号管理" is-link to="/setting" />
            <van-cell title="地址管理" is-link to="/address?from=mine" />
            <van-cell title="关于我们" is-link to="/about" />
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import userInfoHook from "./hook/userInfo";
import NavTopBar from "@/components/NavTopbar.vue";
export default defineComponent({
    components: { NavTopBar },
    setup() {
        const { loading, user } = userInfoHook();
        return { loading, user };
    },
});
</script>

<style lang="scss" scoped>
.nav-title {
    font-size: 14px;
    color: #252525;
}
.user {
    padding: 10px;
    &_info {
        height: 120px;
        background: linear-gradient(90deg, #1baeae, #51c7c7);
        box-shadow: 0 2px 4px #269090;
        border-radius: 8px;
        display: flex;
        align-items: center;
        padding: 10px;
        &_img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin: 0px 10px;
        }
        &_desc {
            color: #fff;
            p {
                line-height: 26px;
                font-size: 14px;
            }
        }
    }
}
</style>
